<template>
    <view class="talk">
      <template v-if="contentList.length > 0">
        <div class="list_item"  v-for="(item,index) in contentList" :key="index" >
        <div class="time_text">{{ item.time }}</div>
        <view class="me_text">{{item.qu}}</view>
        <div class="talk_loding" v-if="item.loading  === 1">
           <van-image width="3rem" height="3rem" fit="contain" :src="ImgGetingGif"></van-image>
        </div>
        <div class="talk_md" v-else>
          <MdPreview  :editorId="id" :modelValue="item.mdText"  previewTheme="github" />
          <van-collapse v-if="item.docs && item.docs.length > 0" v-model="activeNames">
            <van-collapse-item v-for="(doc,index) in item.docs" :title="doc.filename" :key="index" :name="doc.index">
              <template #title>
                <div>【{{doc.index }}】<a :href="doc.url" target="_blank">{{ doc.filename }}</a></div>
              </template>
              <MdPreview  :editorId="id+doc.index" :modelValue="doc.content"  previewTheme="github" />
            </van-collapse-item>
          </van-collapse>
          <div class="talk_md_icons">
            <span v-if="item.isStop ">本次回答已被终止</span>
            <van-icon @click="onRefushImg(item.qu)"     :name="Imgrefush"  size="1.2rem" />
            <van-icon @click="onSearchImg(item.qu)"     :name="Imgsearch" size="1.2rem" />
            <van-icon @click="onChangeImgFlg(item)"  :name="item.tap?ImgDesignUp2:ImgDesignUp" size="1.25rem" />
            <van-icon @click="onChangeImgFlg2(item)" :name="item.noTap?ImgDesigndown2:ImgDesigndown" size="1.25rem" />
            <van-icon @click="(e)=>copyToClipboard(item.mdText,e)"  :name="Imgcopy"  size="1.2rem" />
          </div>
        </div>
      </div>
      </template>
    </view>
  </template>
  
  <script lang="ts" setup name="PageHome">
  import  { contentList,useContent} from "../hooks"
  import { MdPreview  } from 'md-editor-v3';
  import 'md-editor-v3/lib/preview.css';
  import Imgsearch from "@/assets/png/search.svg"
  import Imgcopy from "@/assets/png/if-copy 1@1x.svg"
  import ImgDesignUp from "@/assets/png/Design-thumb-up.svg"
  import ImgDesignUp2 from "@/assets/png/Design-thumb-up2.svg"
  import ImgDesigndown from "@/assets/png/Design-thumb-down.svg"
  import ImgDesigndown2 from "@/assets/png/Design-thumb-down2.svg"
  import ImgGetingGif from '@/assets/png/geting.gif'
  import Imgrefush from "@/assets/png/st-renew 1.svg"
  import { useUtil } from "@/utils";
  const {onChangeImgFlg,onChangeImgFlg2,onSearchImg,onRefushImg } = useContent()
  const id = 'preview-only';
  const { copyToClipboard  } = useUtil()
  const activeNames = ref([])
  </script>
  <style scoped>
  .talk{
   /* border: 1px solid red; */
   
  }
  .time_text{
    color: rgba(154,154,154,1);
    font-size: 12px;
    text-align: center;
  }
  .me_text{
    float:right;
    margin-left: auto;
    margin-right: 0px;
    background-color: rgba(31,170,254,1);
    color: #fff;
    padding: 8px 14px;
    border-radius: 30px;
    text-align: left;
    border-bottom-right-radius: 0px;
  }
  .list_item{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    padding: 10px 0;
    /* border: 1px solid red; */
  }
  .talk_md{
    /* border: 1px solid red; */
    border-radius: 20px;
    border-bottom-left-radius: 0px;
    margin-top: 20px;
    overflow: hidden;
    background-color: #fff;
    text-align: left;
 
  }
  .talk_md_icons{
    position: relative;
    text-align: right;
    padding-right: 20px;
    padding-bottom: 4px;
  }
  .talk_md_icons > i {
    margin-right: 20px;
  }
  .talk_md_icons > span {
    position: absolute;
    top: 0px;
    left: 20px;
  }
  .md-editor-dark {
  --md-bk-color: #333 !important;
}

/* 加载中 */
.talk_loding{
  text-align: left;
  width:2rem;
  border-radius: 1rem;
  /* background-color: #fff; */
  box-sizing: border-box;

}
</style>
  
  